<style lang="stylus" scoped>
@import '../../styl/var.styl'

.method
  color rgba(0, 0, 0, 0.88)
  font-size 12px
  margin-bottom 18px
  line-height 11px
  justify-content space-between
  text-align center
  user-select none

  &>a
    app-region no-drag
    cursor pointer
    display flex
    flex-direction column

    &>i
      font-style normal

    &>.ico
      margin-bottom 11px
      background-color bg
      border-radius 8px
      overflow hidden
      width 112px
      height 80px
      border solid 1px #F4F6F8

    &.now
      cursor default
      color hi

      &>.ico
        background-color #f9fafb
        border-color #9fe1ef

    &:hover
      &>.ico
        background-color lighten(bg, 10%)
        border-color darken(bg, 10%)

  &>.all
    &>.ico
      background-image url('!/svg/src/all.svg')

    &.now
      &>.ico
        background-image url('!/svg/src/now/all.svg')

  &>.screen
    &>.ico
      background-image url('!/svg/src/screen.svg')

    &.now
      &>.ico
        background-image url('!/svg/src/now/screen.svg')

  &>.camera
    &>.ico
      background-image url('!/svg/src/camera.svg')

    &.now
      &>.ico
        background-image url('!/svg/src/now/camera.svg')
</style>

<template lang="pug">
.method
  a(
    :class="[cls, config.src == cls ? 'now' : '']"
    @click="go(cls)"
    v-for="[cls, txt] in li"
  )
    b.ico
    i {{ txt }}
</template>

<script lang="coffee">
import config from '~/store/record.coffee'
import ipc from '~/lib/ipc.coffee'

{camera,main} = ipc

pre_src = undefined

show = =>
  gc() # 防止摄像头常亮
  if document.hidden
    pre_src = undefined
    if not localStorage.recing
      camera.x()
    return

  delete localStorage.recing
  {src} = config
  #if src == pre_src
  #  return
  pre_src = src
  camera.x()
  switch src
    when 'screen'
      config.video = ''
    else
      if not config.video
        {video} = localStorage
        if not video
          return
        config.video = video
      if src == 'all'
        camera.circle(localStorage.人像尺寸 - 0)
      else
        camera.rect()
      setTimeout(
        =>
          if not document.hidden
            main(false)
          return
        1000
      )
  return

document.addEventListener(
  "visibilitychange"
  show
)

export default {
setup:=>
  li = [
    'all 屏幕+摄像头录制'
    'screen 屏幕录制'
    'camera 摄像头录制'
  ]
  for i,pos in li
    p = i.indexOf(' ')
    li[pos] = [i[...p],i[1+p..]]

  watch(
    =>
      config.src
    show
  )

  onMounted show

  watch(
    =>
      config.video
    (val)=>
      if document.hidden
        return

      {src} = config
      if val
        if src == 'screen'
          config.src = localStorage.src or 'all'
      else
        if src != 'screen'
          localStorage.src = config.src
          config.src = 'screen'

      show()
      return
  )

  {
    li
    config
    go:(cls)=>
      config.src = cls
      return
  }
}
</script>
